<template>
	<view>
		<view class="fixed-top">当前得分：<text>{{score}}</text></view>
		<view class="fixed-help">
			<view class="item"  @click="help">
				<view class="icon"><image class="icon-image" src="../../static/tishi.png"></image></view>
				<view>提示</view>
			</view>
			<view class="item">
				<!-- <view class="icon"><image class="icon-image" style="width:25px;height:25px;" src="../../static/share.png"></image></view> -->
				<button class="button-img"  open-type="share" >分享</button>
			</view>
			
		</view>
		<scroll-view  :style="'height:'+scriptHeight+'px'" class="scroll-view" scroll-y="true" @scroll="scroll" :scroll-top="scrollTop">
			<view style="height:30px;"></view>
			<item class="left">
				<view class="avatar"><image class="avatar-image" :src="defaultAvatar"></image></view>
				<view class="content">一心一意</view>
			</item>
			<item class="right">
				<view class="content">异想天开</view>
				<view class="avatar"><image class="avatar-image" :src="userDefaultAvatar"></image></view>
			</item>
			<item class="left">
				<view class="avatar"><image class="avatar-image" :src="defaultAvatar"></image></view>
				<view class="content">开开心心</view>
			</item>
			<item class="right">
				<view class="content">心想事成</view>
				<view class="avatar"><image class="avatar-image" :src="userDefaultAvatar"></image></view>
			</item>
			<item class="left">
				<view class="avatar"><image class="avatar-image" :src="defaultAvatar"></image></view>
				<view class="content">成人之美</view>
			</item>
			<item class="right">
				<view class="content">美酒佳肴</view>
				<view class="avatar"><image class="avatar-image" :src="userDefaultAvatar"></image></view>
			</item>
			<view class="shili">------请参考以上例子进行成语接龙------</view>
			<view v-for="(item,index) in list" :key="index">
				<item class="left" v-if="item.type==1">
					<view class="avatar"><image class="avatar-image" :src="defaultAvatar"></image></view>
					<view class="content">{{item.title}}</view>
				</item>
				<item class="right" v-else="item.type==2">
					<view class="content">{{item.title}}</view> 
					<view class="avatar"><image class="avatar-image" :src="userDefaultAvatar"></image></view>
				</item>
			</view>
			
		</scroll-view>
		<view class="submit">
			<!-- <view class="tool">
				<viw class="item">
					<view class="icon"><image src="../../static/tishi.png"></image></view>
					<view class="title">提示</view>
				</viw>
			</view> -->
			<view class="send">
				<view class="submit-left">
					<input class="input"  adjust-position="false" hold-keyboard="true" confirm-hold="true" @input="onInput" @focus="inputFocus" @confirm="submit"  type="text" :value="inputChengyu" :placeholder="placeholder" confirm-type="send"></input>
				</view>
				<view class="sumbit-right" @click="submit">提交</view>
			</view>
			
		</view>
	</view>
	

</template>

<script>
	import unils from "../../unils/utils.js"
	export default {
		data() {
			return {
				'tishiCount':3,
				'scrollAddHeight':50,
				'scrollTop':0,
				'scrollOldTop':0,
				'openid':"",
				'inputChengyu':"",
				'preChengyu':"",
				'pinyin':"",
				'placeholder':"",
				'serialId':"",
				'score':0,
				'scriptHeight':400,
				'defaultAvatar':"../../static/default-boy-avatar.png",
				'userDefaultAvatar':"../../static/default-boy-avatar.png",
				'list':[],
				'helpTmp':[],
			}
		},
		onShow() {
			this.score = 0;
			this.serialId = "";
			this.inputChengyu = '';
			this.preChengyu = "";
			this.pinyin = "";
			this.placeholder = "";
			
		},
		onReady() {
			this.scriptHeight = (uni.getSystemInfoSync().windowHeight-50);
			// console.log(uni.getSystemInfoSync().windowHeight);
			
		},
		onLoad(option) {
			console.log(option);
			//获取用户登录openid
			let openid = uni.getStorageSync('openid');
			// console.log(openid);
			if(!unils.stringIsEmpty(openid)){
				this.openid = openid;
				this.initChengyu();
			} else {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '为了更好的体验，需要授权登录',
				    success: function (res) {
				        if (res.confirm) {
				            // console.log('用户点击确定2');
							
							var p = unils.authLogin();
							p.then(function(isLogin){
								if(isLogin){
									that.nickName = uni.getStorageSync('nickName');
									that.avatar = uni.getStorageSync('avatarUrl');
									that.openid = uni.getStorageSync('openid');
									that.initChengyu();
								} else {
									
								}
							})
							
							
							
				        } else if (res.cancel) {
				            uni.switchTab({
				            	url:'../index/index',
				            })
				        }
				    }
				});
			}
			//获取电脑和用户头像
			let gender = uni.getStorageSync('gender');
			if(gender == 1){
				this.defaultAvatar = "../../static/default-girl-avatar.png";
			} else {
				this.defaultAvatar = "../../static/default-boy-avatar.png";
			}
			let avatarUrl = uni.getStorageSync('avatarUrl');
			
			if(unils.stringIsEmpty(avatarUrl)){
				this.userDefaultAvatar = "../../static/default-boy-avatar.png";
			} else {
				this.userDefaultAvatar = avatarUrl;
			}
			
			
		},
		onShareAppMessage(res) {
			console.log('========share========');
		    if (res.from === 'button') {// 来自页面内分享按钮
			  console.log(res);
		      console.log(res.target)
		    }
			// console.log(this.openid);
			let openid = uni.getStorageSync('openid');
			// console.log(openid);
		    return {
		      title: '成语接龙，不服来战！',
		      path: '/pages/fight/fight?share_user_id='+openid,
		    }
		  },
		methods: {
			initChengyu:function(){
				let that = this;
				uni.request({
					url: that.websiteUrl+'/computer_index',
					method:'GET',
					header: {
					        'x-requested-with': 'xmlhttprequest' //自定义请求头信息
					    },
					data:{
						'openid':that.openid,
					},
					success: (res) => {
						if(res.data.code != 1){
							if(res.data.msg=='请先登录！'){
								
							} else {
								uni.showToast({
									title:res.data.msg,
									duration:2000,
									icon:'none',
								})
							}
							
						} else {
							let chengyuObject = res.data.data.content;
							console.log(chengyuObject.title);
							console.log(chengyuObject);	
							that.list.push(chengyuObject);
							that.preChengyu = chengyuObject['title'];
							that.pinyin = chengyuObject['pinyin'];
							that.placeholder = "请输入【"+chengyuObject['pinyin']+"】拼音开头的成语";
							that.serialId = res.data.data.serial_id; 
							
						}
					}
				})
			},
			scroll : function(e) {
				// console.log(e.detail.scrollTop);
				this.scrollOldTop = e.detail.scrollTop;
			},
			inputFocus:function(e){
				this.placeholder = "";
				this.inputChengyu = "";
				console.log('inputFocus');
				
			},
			//提交
			submit:function(){
				let that = this;
				if(unils.stringIsEmpty(that.inputChengyu)){
					uni.showToast({
						title:"请输入成语！",
						duration:2000,
						icon:'none',
					})
					return;
				}
				if(that.inputChengyu.length != 4){
					uni.showToast({
						title:"请输入四字成语！",
						duration:2000,
						icon:'none',
					})
					return;
				}
				that.score +=1;
				uni.request({
					url: that.websiteUrl+'/computer', 
					data:{
						'chengyu':that.inputChengyu,
						'pre_chengyu':that.preChengyu,
						'openid':that.openid,
						'serial_id':that.serialId,
						'score':that.score,
					
					},
					method:'POST',
					header: {
					        'x-requested-with': 'xmlhttprequest' //自定义请求头信息
					    },
					success: (res) => {
						if(res.data.code != 1){
							that.score -=1;
							uni.showToast({
								title:res.data.msg,
								duration:2500,
								icon:'none',
							})
						} else {
							let chengyuObject = res.data.data;
							console.log(chengyuObject);	
							that.list.push(chengyuObject);
							
							that.preChengyu = chengyuObject.title;
							that.scrollOldTop += that.scrollAddHeight;
							that.scrollTop = that.scrollOldTop;
							// that.placeholder= "ddddd";
							uni.request({
								url: that.websiteUrl+'/computersendmsg',
								data:{
									'chengyu':chengyuObject.title,
									'pre_chengyu':that.preChengyu,
									'openid':that.openid,
									'serial_id':that.serialId,
								
								},
								method:'POST',
								header: {
								        'x-requested-with': 'xmlhttprequest' //自定义请求头信息
								    },
								success:(res) =>{
									
									if(res.data.code != 1){
										if(res.data.code == 1002){
											uni.showModal({
											    title: '提示',
											    content: res.data.msg,
											    success: function (res) {
											        if (res.confirm) {
														that.initChengyu();
														that.list = [];
														that.score = 0;
											        } else if (res.cancel) {
											            uni.switchTab({
											            	url:"../index/index",
											            })
											        }
											    }
											});
										} else {
											uni.showToast({
												title:res.data.msg,
												duration:2000,
												icon:'none',
											})
										}
										
									} else {
										let chengyuObject = res.data.data;
										// console.log(chengyuObject.title);
										// console.log(chengyuObject);	
										that.list.push(chengyuObject);
										
										that.preChengyu = chengyuObject['title'];
										that.pinyin = chengyuObject['pinyin'];
										that.inputChengyu = "";
										that.placeholder = "请输入【"+chengyuObject['pinyin']+"】拼音开头的成语";
										
										console.log(that.placeholder);
 										// that.scrollTop += 40;
										that.scrollOldTop += that.scrollAddHeight;
										that.scrollTop = that.scrollOldTop;
									}
								}
							})
						}
					}
				})
			},
			//获取input值
			onInput:function(e){
				this.inputChengyu = e.detail.value;
				console.log("onInput==========");
				console.log(e.detail.value);
			},
			//求助
			help:function(){
				let that = this; 
				this.tishiCount = uni.getStorageSync('tishi_count');
				// console.log(this.tishiCount);  
				
				// if(that.tishiCount == 0){
				// 	uni.showToast({
				// 		title:'今天机会已经用完，明天可以接着用！',
				// 		duration:2000,
				// 		icon:'none',
				// 	})
				// 	return;
				// }
				uni.request({
					url: that.websiteUrl+'/chengyuhelp',
					data:{
						'pre_chengyu':that.preChengyu,
						'openid':that.openid,
					},
					method:'POST',
					header: {
						'x-requested-with': 'xmlhttprequest' //自定义请求头信息
					},
					success:(res)=>{
						console.log(res);
						if(res.data.code != 1){
							uni.showToast({
								title:res.data.msg,
								duration:2000,
								icon:'none',
							})
						} else {
							that.helpTmp = res.data.data;

							uni.showModal({
							    title: '',
							    content: '每天有3次提示，还剩'+that.tishiCount+'次',
							    success: function (res) {
							        if (res.confirm) {
										that.placeholder = that.helpTmp.title;
										that.inputChengyu = that.helpTmp.title;
										uni.setStorageSync('tishi_count', that.helpTmp.score);
										uni.request({
											url: that.websiteUrl+'/scoredec',
											data:{
												'openid':that.openid,
											},
											method:'POST',
											header: {
												'x-requested-with': 'xmlhttprequest' //自定义请求头信息
											},
										})
							        } else if (res.cancel) {
							            
							        }
							    }
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.fixed-top{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index:999;
	font-size: 13px;
	display: flex;
	justify-content: center;
	margin-top: 10px;
	color:$uni-primary-color;
}
.fixed-help{
	position: fixed;
	bottom: 70px;
	// left: 0;
	right: 20px;
	font-size: 13px;
	z-index:888;
	color:$uni-primary-color;
	.item{
		margin-top: 10px;
		border: 1px $uni-primary-color solid;
		border-radius: 5px;
		padding:3px;
		.icon-image{
			width:30px;
			height:30px;
		}
		.button-img{
			font-size:14px;
			// margin-left: auto;
				// margin-right: auto;
				// padding-left: 0px;
				// padding-right: 0px;
				padding: 0;
				margin:0;
				box-sizing: border-box;
				color:$uni-primary-color;
			// background-image: url("../../static/share.png");
			// width:30px;
			// height:30px;
			// background-repeat: no-repeat;
			background-color:transparent;
			border-style: none;
			border-color: $uni-primary-color;
		}
		.button-img:after{
			border: none;
			
		}
	}
	
}
.scroll-view{
	// padding-bottom: 10px;
	// height: 454px;
	background-color: $uni-scroll-bg-clolr;
	// background-color: #007AFF;
	color:$uni-text-color;
	.left{
		display: flex;
		margin-left: 10px;
		justify-content: flex-start;
		align-items: center;
		// background-color: #007AFF;
		padding-bottom: 15px;
		.avatar{
			.avatar-image{
				width:35px;
				height: 35px;
				border-radius: 50%;
			}
		}
		.content{
			position: relative;
			font-size: 13px;
			// font-weight: bold;
			padding: 10px;
			padding:5px 8px;
			margin-left: 15px;
			background-color: $uni-primary-color;
			border-radius: 5px;
			color:$uni-bg-color;
		}
		.content:after{
			content: '';
			position: absolute;
			right:0;
			left:-5px;
			bottom: 7px;
			width:10px;
			height:10px;
			background: $uni-primary-color;
			transform: rotate(45deg);
		}
	}
	.right{
		display: flex;
		margin-right:10px;
		justify-content: flex-end;
		align-items: center;
		
		.avatar{
			.avatar-image{
				width:35px;
				height: 35px;
				border-radius: 50%;
			}
		}
		.content{
			position: relative;
			font-size: 13px;
			padding: 10px;
			padding: 5px 8px;
			margin-right: 15px;
			background-color: $uni-primary-color;
			border-radius: 5px;
			color:$uni-bg-color;
		}
		.content:after{
			content: '';
			position: absolute;
			right:-5px;
			// left:0px;
			bottom: 9px;
			width:10px;
			height:10px;
			background: $uni-primary-color;
			transform: rotate(45deg);
		}
		
	}
	.shili{
		font-size: 13px;
		color: $uni-primary-color;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30px 0;
		// heiht:80px;
	}
}
.submit{
	height: 50px;
	position: fixed;
	bottom: 0;
	width:100%;
	// background-color: #3F536E;
	.tool{
		display: flex;
		height:40px;
		// position: fixed;
		// top: 0;
		// bottom: 150;
		// background-color: #007AFF;
		.item{
			.icon{
				image{
					width:30px;
					height: 30px;
				}
			}
			.title{
				
			}
		}
	}
	.send{
		// background-color: #4CD964;
		height:50px;
		display: flex;
		align-items: center;
		margin: 0 10px;
		// margin-top:10px;
		position: fixed;
		bottom: 0;
		justify-content:center;
		width:95%;
		.submit-left{
			width: 100%;
			font-size: 13px;
			// background-color: #007AFF;
			.input{
				height: 35px;
				// border-bottom: 1px red solod;
				border-bottom: 1px $uni-primary-color solid;
				color:#c8c7cc;
			}
		}
		.sumbit-right{
			font-size: 15px;
			flex-shrink: 0;
			margin-left: 10px;
			// height: 30px;
			background-color: $uni-primary-color;
			border-radius: 5px;
			color:$uni-bg-color;
			display: flex;
			align-items: center;
			justify-content: center;
			padding:10px 15px;
		}
	}
	
}
</style>
